<template>
  <div>
    <PageWrapper dense fixedHeight contentClass="flex">
      <BasicTable
        @register="registerTable"
        size="small"
        :pagination="{ pageSize: 20 }"
        :searchInfo="searchInfo"
      >
        <template #toolbar>
          <a-button type="primary" @click="handleEdit">新增</a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'logo'">
            <a-image
              :width="60"
              :height="34"
              :src="record.logo"
              preview
            />
          </template>

          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
                {
                  label: '编辑',
                  tooltip: '编辑',
                  onClick: handleEdit.bind(null, record),
                },
                {
                  label: '删除',
                  tooltip: '删除',
                  color: 'error',
                  popConfirm: {
                    title:'确认删除当前记录吗？',
                    placement: 'left',
                    confirm: handleDelete.bind(null, record),
                  },
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>

    </PageWrapper>

    <EditorModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { PageWrapper } from '@/components/Page'
import { Tag as ATag, Image as AImage } from 'ant-design-vue'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import { columns, searchFormSchema, formSchema } from './data'
import { useModal } from '@/components/Modal'
import { useMessage } from '@/hooks/web/useMessage'
import { formatQuery } from '@/utils/helper'
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { getDeviceList, deleteDevice } from "@/api/device/device_list";
import EditorModal from './EditorModal.vue'

const userInfo = useUserStore().getUserInfo
const { createMessage } = useMessage()
const searchInfo = {}

const [registerModal, { openModal }] = useModal()
const [registerTable, { reload, getForm }] = useTable({
  title: '设备列表',
  api: getDeviceList,
  rowKey: 'id',
  columns,
  formConfig: {
    labelWidth: 64,
    schemas: searchFormSchema,
    autoSubmitOnEnter: true,
    showResetButton: true,
    actionColOptions: { span: 12 },
  },
  useSearchForm: true,
  showTableSetting: false,
  showIndexColumn: true,
  bordered: true,
  actionColumn: {
    width: 120,
    title: '操作',
    dataIndex: 'action',
    //slots: { customRender: 'action' },
  },
  handleSearchInfoFn: (info) => {
    return info
  },
  beforeFetch: (record) => {
    const { page = 1, pageSize = 20, keyword } = record
    return {
      page,
      pageSize,
      search: formatQuery({
        keyword,
      }),
    }
  },
  immediate: true,
})

const handleSuccess = () => reload()

const handleEdit = (record) => {
  openModal(true, {
    isUpdate: !!record.id,
    record,
  });
}

const handleDelete = (record) => {
  deleteDevice(record).then((data) => {
    reload();
  });
}
</script>

<style scoped></style>
